<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-CN">
	
<head>
	<title>安装 与 介绍 — Vue.js</title>
	<meta charset="utf-8">
	<meta name="description" content="Vue.js - The Progressive JavaScript Framework">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<script src="/js/jquery-3.1.0.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="/js/prettify.js"></script>
	<script type="text/javascript" src="/js/content.js"></script>
	<link rel="stylesheet" href="/css/prettify.css">
	<link rel="icon" href="/images/logo.png" type="image/png">


	<link rel="stylesheet" type="text/css" href="/css/vuex.css"/>



	<!-- main page styles -->
	<link rel="stylesheet" href="/css/page.css">
<style type="text/css">
	.content .linenums>ol {
		margin: 0;
		padding-left:35px;
	}
	.hljs-comment,.hljs-quote{color:#8e908c}
	.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c82829}
	.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5871f}
	.hljs-attribute{color:#eab700}
	.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#718c00}
	.hljs-section,.hljs-title{color:#4271ae}
	.hljs-keyword,.hljs-selector-tag{color:#8959a8}
	.hljs{display:block;overflow-x:auto;background:#fff;color:#4d4d4c;padding:.5em}
	.hljs-emphasis{font-style:italic}
	.hljs-strong{font-weight:700}
</style>
</head>

<body class="docs">


<div id="header">
	<a id="logo" href="https://cn.vuejs.org/">
		<img src="/images/logo.png">
		<span>Vuecli</span>
	</a>
</div>


<div id="main" class="fix-sidebar">
	<div class="sidebar">
		<div class="sidebar-inner">
			<div class="list">
			<ul class="menu-root">
	<li>
		<h3>知识点</h3>
	</li>
	<li id="stylus" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/stylus" class="sidebar-link">stylus</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#变量">变量</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#@import引入">@import引入</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#特殊用法">特殊用法</a>
			</li>
		</ul>
	</li>

	<li id="transfer" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/transfer" class="sidebar-link">框架数据传递 全局函数</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/transfer#func">第三方全局函数</a>
			</li>
		</ul>
	</li>

	<li id="axios" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/axios" class="sidebar-link">axios</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Features">Features</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#浏览器支持">浏览器支持</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#安装">安装</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Example">Example</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#API">axios API</a>
			</li>
			<ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#请求方法的别名">请求方法的别名</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#并发">并发</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#创建实例">创建实例</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#实例方法">实例方法</a>
				</li>
			</ul>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#请求配置">请求配置</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#响应结构">响应结构</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#defaults">配置的默认值/defaults</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#拦截器">拦截器</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#错误处理">错误处理</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#取消">取消</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Semver">Semver</a>
			</li>
		</ul>
	</li>
	
	
	<li>
		<h3>框架布局</h3>
	</li>
	<li id="mulujiegou" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/mulujiegou" class="sidebar-link">目录结构</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#路径配置import">路径配置import</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#总体框架">总体框架</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#文件结构细分">文件结构细分</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#build">build - [webpack配置]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#config">config - [vue项目配置]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#node_modules">node_modules - [依赖包]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#router">router - [路由配置]</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>


	<li id="huanjingpeizhi" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/huanjingpeizhi" class="sidebar-link">基于webpack 环境配置</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#运行服务器">运行服务器</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#运行服务器0">运行服务器 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#cmd其他操作命令">cmd其他操作命令</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#代码初始化">代码初始化</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#viewport">viewport index.html</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#resetcss">reset.css 样式初始化</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#stylus_install">安装 stylus</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#fastclick">fastclick.js 解决点击延时</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#bordercss">border.css 1像素边框</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#iconfont">iconfont</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#安装">安装</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#node">安装node.js LTS版本 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#vuecli">安装vue-cil 全局安装一次 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#webpack">创建 webpack模板的项目 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#cnpm">使用cnmp</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	


	<li>
		<h3>Vue Router</h3>
	</li>
	<li id="vrouter-van" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-van" class="sidebar-link">van: 基于vue-cil的使用</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-van#indexjs" data-scroll="" class="section-link">@/router/index.js</a></li>
		</ul>
	</li>
	<li id="vrouter-start" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-start" class="sidebar-link">安装 与 介绍</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-start#installation" data-scroll="" class="section-link">安装</a></li>
			<li><a href="/Vuecli/vrouter-start#introduce" data-scroll="" class="section-link">介绍</a></li>
		</ul>
	</li>
	<li id="vrouter-basic" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-basic" class="sidebar-link">基础</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-basic#start" class="section-link">起步</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#start-html" class="section-link">HTML</a></li>
				<li><a href="/Vuecli/vrouter-basic#start-javascript" class="section-link">JavaScript</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#dynamic_matching" class="section-link">动态路由匹配</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-响应路由参数的变化" class="section-link">响应路由参数的变化</a></li>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-高级匹配模式" class="section-link">高级匹配模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-匹配优先级" class="section-link">匹配优先级</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#nested-routes" class="section-link">嵌套路由</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#navigation" class="section-link">编程式的导航</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#named-routes" class="section-link">命名路由</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#named_views" class="section-link">命名视图</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#named_views-嵌套命名视图" class="section-link">嵌套命名视图</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#redirect_and_alias" class="section-link">重定向和别名</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#redirect_and_alias-重定向" class="section-link">重定向</a></li>
				<li><a href="/Vuecli/vrouter-basic#redirect_and_alias-别名" class="section-link">别名</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#passing_props" class="section-link">路由组件传参</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#passing_props-布尔模式" class="section-link">布尔模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#passing_props-对象模式" class="section-link">对象模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#passing_props-函数模式" class="section-link">函数模式</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#history_mode" class="section-link">HTML5 History 模式</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#history_mode-后端配置例子" class="section-link">后端配置例子</a></li>
				<li><a href="/Vuecli/vrouter-basic#history_mode-警告" class="section-link">警告</a></li>
			</ul>
		</ul>
	</li>
	<li id="vrouter-advanced" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-advanced" class="sidebar-link">进阶</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-advanced#navigation_guards" class="section-link">导航守卫</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局守卫" class="section-link">全局守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局解析守卫" class="section-link">全局解析守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局后置钩子" class="section-link">全局后置钩子</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-路由独享的守卫" class="section-link">路由独享的守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-组件内的守卫" class="section-link">组件内的守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-完整的导航解析流程" class="section-link">完整的导航解析流程</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#meta" class="section-link">路由元信息</a></li>
		
			<li><a href="/Vuecli/vrouter-advanced#transitions" class="section-link">过渡动效</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#transitions-单个路由的过渡" class="section-link">单个路由的过渡</a></li>
				<li><a href="/Vuecli/vrouter-advanced#transitions-基于路由的动态过渡" class="section-link">基于路由的动态过渡</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#data_fetching" class="section-link">数据获取</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#data_fetching-导航完成后获取数据" class="section-link">导航完成后获取数据</a></li>
				<li><a href="/Vuecli/vrouter-advanced#data_fetching-在导航完成前获取数据" class="section-link">在导航完成前获取数据</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#scroll_behavior" class="section-link">滚动行为</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#scroll_behavior-异步滚动" class="section-link">异步滚动</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#lazy_loading" class="section-link">路由懒加载</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#lazy_loading-把组件按组分块" class="section-link">把组件按组分块</a></li>
			</ul>
		</ul>
	</li>


	<li>
		<h3>Vuex</h3>
	</li>
	<li id="vuex-start" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-start" class="sidebar-link">安装 与 介绍</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-start#installation" data-scroll="" class="section-link">安装</a></li>
			<li><a href="/Vuecli/vuex-start#introduce" data-scroll="" class="section-link">Vuex 是什么？</a></li>
			<li><a href="/Vuecli/vuex-start#vrouter-basic0" data-scroll="" class="section-link">开始</a></li>
		</ul>
	</li>
	<li id="vuex-guide" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-guide" class="sidebar-link">核心概念</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-guide#state" data-scroll="" class="section-link">State</a></li>
			<li><a href="/Vuecli/vuex-guide#getters" data-scroll="" class="section-link">Getter</a></li>
			<li><a href="/Vuecli/vuex-guide#mutations" data-scroll="" class="section-link">Mutation</a></li>
			<li><a href="/Vuecli/vuex-guide#actions" data-scroll="" class="section-link">Action</a></li>
			<li><a href="/Vuecli/vuex-guide#modules" data-scroll="" class="section-link">Module</a></li>
		</ul>
	</li>
	<li id="vuex-important" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-important" class="sidebar-link">重点知识</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-important#structure" data-scroll="" class="section-link">项目结构</a></li>
			<li><a href="/Vuecli/vuex-important#plugins" data-scroll="" class="section-link">插件</a></li>
			<li><a href="/Vuecli/vuex-important#strict" data-scroll="" class="section-link">严格模式</a></li>
			<li><a href="/Vuecli/vuex-important#forms" data-scroll="" class="section-link">表单处理</a></li>
			<li><a href="/Vuecli/vuex-important#testing" data-scroll="" class="section-link">测试</a></li>
			<li><a href="/Vuecli/vuex-important#hot-reload" data-scroll="" class="section-link">热重载</a></li>
		</ul>
	</li>


	<li>
		<h3>Vue-CLI</h3>
	</li>
	<li id="vuecli-start" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuecli-start" class="sidebar-link">安装 与 介绍</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuecli-start#introduce" data-scroll="" class="section-link">介绍</a></li>
			<li><a href="/Vuecli/vuecli-start#installation" data-scroll="" class="section-link">安装</a></li>
		</ul>
	</li>
	<li id="vuecli-basic" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuecli-basic" class="sidebar-link">基础</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuecli-basic#prototyping" data-scroll="" class="section-link">快速原型开发</a></li>
			<li><a href="/Vuecli/vuecli-basic#creating-a-project" data-scroll="" class="section-link">创建一个项目</a></li>
			<li><a href="/Vuecli/vuecli-basic#plugins-and-presets" data-scroll="" class="section-link">插件和 Preset</a></li>
			<li><a href="/Vuecli/vuecli-basic#cli-service" data-scroll="" class="section-link">CLI 服务</a></li>
		</ul>
	</li>
	<li id="vuecli-develop" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuecli-develop" class="sidebar-link">开发</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuecli-develop#browser-compatibility" data-scroll="" class="section-link">浏览器兼容性</a></li>
			<li><a href="/Vuecli/vuecli-develop#html-and-static-assets" data-scroll="" class="section-link">HTML 和静态资源</a></li>
			<li><a href="/Vuecli/vuecli-develop#css" data-scroll="" class="section-link">CSS 相关</a></li>
			<li><a href="/Vuecli/vuecli-develop#webpack" data-scroll="" class="section-link">webpack 相关</a></li>
			<li><a href="/Vuecli/vuecli-develop#mode-and-env" data-scroll="" class="section-link">环境变量和模式</a></li>
			<li><a href="/Vuecli/vuecli-develop#build-targets" data-scroll="" class="section-link">构建目标</a></li>
			<li><a href="/Vuecli/vuecli-develop#deployment" data-scroll="" class="section-link">部署</a></li>
		</ul>
	</li>
	
</ul>

			</div>
		</div>
	</div>

	

<div class="content guide with-sidebar components-guide">
	<h2 id="introduce">
		<a href="#introduce" class="headerlink" title="introduce" data-scroll="">介绍</a>
	</h2>	
	<p class="bit-sponsor"><a href="https://www.bitsrc.io/?utm_source=vue&amp;utm_medium=vue&amp;utm_campaign=vue&amp;utm_term=vue&amp;utm_content=vue"
		 target="_blank"><span>This project is sponsored by</span> <img alt="bit" src="https://raw.githubusercontent.com/vuejs/vuejs.org/master/themes/vue/source/images/bit-wide.png"></a></p>
	<div class="warning custom-block">
		<p class="custom-block-title">警告</p>
		<p>这份文档是对应 <code>@vue/cli</code> <strong>3.x</strong> 版本的。老版本的 <code>vue-cli</code> 文档请移步<a href="https://github.com/vuejs/vue-cli/tree/v2#vue-cli--"
			 target="_blank" rel="noopener noreferrer">这里<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px"
				 viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
					<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
					<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
				</svg></a>。</p>
	</div>
	<p>Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：</p>
	<ul>
		<li>通过 <code>@vue/cli</code> 搭建交互式的项目脚手架。</li>
		<li>通过 <code>@vue/cli</code> + <code>@vue/cli-service-global</code> 快速开始零配置原型开发。</li>
		<li>一个运行时依赖 (<code>@vue/cli-service</code>)，该依赖：
			<ul>
				<li>可升级；</li>
				<li>基于 webpack 构建，并带有合理的默认配置；</li>
				<li>可以通过项目内的配置文件进行配置；</li>
				<li>可以通过插件进行扩展。</li>
			</ul>
		</li>
		<li>一个丰富的官方插件集合，集成了前端生态中最好的工具。</li>
		<li>一套完全图形化的创建和管理 Vue.js 项目的用户界面。</li>
	</ul>
	<p>Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需
		eject。</p>
	<h2 id="该系统的组件"><a href="#该系统的组件" aria-hidden="true" class="header-anchor">该系统的组件</a></h2>
	<p>Vue CLI 有几个独立的部分——如果你看到了我们的<a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue" target="_blank" rel="noopener noreferrer">源代码<svg
			 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
			 class="icon outbound">
				<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
				<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
			</svg></a>，你会发现这个仓库里同时管理了多个单独发布的包。</p>
	<h3 id="cli"><a href="#cli" aria-hidden="true" class="header-anchor">CLI</a></h3>
	<p>CLI (<code>@vue/cli</code>) 是一个全局安装的 npm 包，提供了终端里的 <code>vue</code> 命令。它可以通过 <code>vue create</code>
		快速创建一个新项目的脚手架，或者直接通过 <code>vue serve</code> 构建新想法的原型。你也可以通过 <code>vue ui</code> 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。</p>
	<h3 id="cli-服务"><a href="#cli-服务" aria-hidden="true" class="header-anchor">CLI 服务</a></h3>
	<p>CLI 服务 (<code>@vue/cli-service</code>) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 <code>@vue/cli</code> 创建的项目中。</p>
	<p>CLI 服务是构建于 <a href="http://webpack.js.org/" target="_blank" rel="noopener noreferrer">webpack<svg xmlns="http://www.w3.org/2000/svg"
			 aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
				<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
				<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
			</svg></a> 和 <a href="https://github.com/webpack/webpack-dev-server" target="_blank" rel="noopener noreferrer">webpack-dev-server<svg
			 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
			 class="icon outbound">
				<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
				<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
			</svg></a> 之上的。它包含了：</p>
	<ul>
		<li>加载其它 CLI 插件的核心服务；</li>
		<li>一个针对绝大部分应用优化过的内部的 webpack 配置；</li>
		<li>项目内部的 <code>vue-cli-service</code> 命令，提供 <code>serve</code>、<code>build</code> 和 <code>inspect</code> 命令。</li>
	</ul>
	<p>如果你熟悉 <a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="noopener noreferrer">create-react-app<svg
			 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
			 class="icon outbound">
				<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
				<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
			</svg></a> 的话，<code>@vue/cli-service</code> 实际上大致等价于 <code>react-scripts</code>，尽管功能集合不一样。</p>
	<p><a href="/zh/guide/cli-service.html" class="">CLI 服务</a>章节涵盖了它的具体用法。</p>
	<h3 id="cli-插件"><a href="#cli-插件" aria-hidden="true" class="header-anchor">CLI 插件</a></h3>
	<p>CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 <code>@vue/cli-plugin-</code>
		(内建插件) 或 <code>vue-cli-plugin-</code> (社区插件) 开头，非常容易使用。</p>
	<p>当你在项目内部运行 <code>vue-cli-service</code> 命令时，它会自动解析并加载 <code>package.json</code> 中列出的所有 CLI 插件。</p>
	<p>插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。我们会在<a href="/zh/guide/plugins-and-presets.html" class="">插件和
			preset</a> 章节进行深入讨论。</p>
	<br><br><br>
	
	
	
	<h2 id="installation">
		<a href="#installation" class="headerlink" title="installation" data-scroll="">安装</a>
	</h2>	
	<div class="warning custom-block">
		<p class="custom-block-title">关于旧版本</p>
		<p>Vue CLI 的包名称由 <code>vue-cli</code> 改成了 <code>@vue/cli</code>。
			如果你已经全局安装了旧版本的 <code>vue-cli</code> (1.x 或 2.x)，你需要先通过 <code>npm uninstall vue-cli -g</code> 或 <code>yarn global
				remove vue-cli</code> 卸载它。</p>
	</div>
	<div class="tip custom-block">
		<p class="custom-block-title">Node 版本要求</p>
		<p>Vue CLI 需要 <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">Node.js<svg xmlns="http://www.w3.org/2000/svg"
				 aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
					<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
					<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
				</svg></a> 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 <a href="https://github.com/creationix/nvm" target="_blank" rel="noopener noreferrer">nvm<svg
				 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
				 class="icon outbound">
					<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
					<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
				</svg></a> 或 <a href="https://github.com/coreybutler/nvm-windows" target="_blank" rel="noopener noreferrer">nvm-windows<svg
				 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
				 class="icon outbound">
					<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
					<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
				</svg></a> 在同一台电脑中管理多个 Node 版本。</p>
	</div>
	<p>可以使用下列任一命令安装这个新的包：</p>
	<div class="language-bash extra-class">
		<pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> -g @vue/cli
	<span class="token comment"># OR</span>
	yarn global add @vue/cli
	</code></pre>
	</div>
	<p>安装之后，你就可以在命令行中访问 <code>vue</code> 命令。你可以通过简单运行 <code>vue</code>，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。</p>
	<p>你还可以用这个命令来检查其版本是否正确 (3.x)：</p>
	<div class="language-bash extra-class">
		<pre class="language-bash"><code>vue --version
	</code></pre>
	</div>		
			
			
			
</div>








		<!-- important -->

<!-- var end -->
</div>	<!-- #main -->

<script>
	
var thisAction = '<?php echo ($thisAction); ?>';

if (thisAction == 'all') {
	// sidebar全部显示
	var $link = $('.content .headerlink');
	var $slink = $('.section-link');
	
}else {
	// 仅展开 当前actionName
	$('.menu-sub').hide();
	$('#'+thisAction+'>a').addClass('current'); 
	$('#'+thisAction+'>i').addClass('sidebar-tap').html('－');
	$('#'+thisAction+' .menu-sub').show();


	$('.sidebar-menu>i').click(function(){
		if($(this).hasClass('sidebar-tap')) {
			$(this).html('＋').toggleClass('sidebar-tap');
			$(this).siblings('.menu-sub').hide();
		}else {
			$('.sidebar-menu>i').html('＋').removeClass('sidebar-tap');
			$('.sidebar-menu .menu-sub').hide();

			$(this).html('－').toggleClass('sidebar-tap');
			$(this).siblings('.menu-sub').show();
		}
	});


	let href = window.location.href;
	let start = href.indexOf('#');
	let href2 = '';
	if(start > 0) {
		href2 = href.slice(start+1);
		$('#'+thisAction+' .section-link[href="#'+href2+'"]').addClass('active');
	}else {
		$('#'+thisAction+' .menu-sub .section-link:first').addClass('active');
	}
 
	var $link = $('.content .headerlink');
	var $slink = $('#'+thisAction+' .menu-sub .section-link');
	
	$('#'+thisAction+' .section-link').click(function(){
		$slink.removeClass('active');
		$(this).addClass('active');
	});
}



// 页面滚动 .sidebar提示 start
let scrollArr = [];
$.each( $link, function() {
	let offset = $(this).offset();
	let thisId = $(this).attr('id');
	scrollArr.push(offset.top);
});


$(window).on('scroll', function(){
	let scrollTop = $(document).scrollTop();
	let nap = 110;
	let slength = scrollArr.length;
	let i=0;
	if(scrollTop < (scrollArr[0]-nap) ) {
	}else if(scrollTop >= scrollArr[slength-1]-nap) {
		i = slength-1;
	}else {
		for(i=0; i<scrollArr.length; i++) {
			if(scrollTop>=scrollArr[i]-nap && scrollTop<scrollArr[i+1]-nap) {
				break;
			}
		}
	}

	if($slink.eq(i).length > 0){
		$slink.removeClass('active');
		$slink.eq(i).addClass('active');
	}
});


</script>

    
  </body>
</html>